<template>
	<view class="navbar">
		<view class="navbar_continar" :style="{background: 'rgba(15, 17, 56,'+alpha+')'}">
			<!-- 状态栏,解决小程序顶部状态位置问题 -->
			<view :style="{height:statusBarHeight+'px'}"></view>
			
			<view class="navbar_content" :style="{height:navBarHeight+'px', width: widowHeight+'px'}">
				<view v-if="alpha === 1" class="navbar_content-title">
					<view class="title-image">
						<image v-if="datas.avatar" :src="datas.avatar" mode=""></image>
						<image v-else src="../../static/icon/tou-1.png" mode=""></image>
					</view>
					<text> {{datas.author_name? datas.author_name : '游 客'}} </text>
				</view>
				<view class="">
					
				</view>
				<view @click="goLabel" class="tabbar_icon">
					<!-- 使用uniapp自带的icon库,需要重启才能生效 https://ext.dcloud.net.cn/plugin?id=28#rating -->
					<uni-icons type="gear" color='#fff' size="22"></uni-icons>
				</view>
			</view>

			<!-- <text>导航栏</text> -->
			
		</view>
		<!-- <view  :style="{height:navBarHeight+statusBarHeight+'px'}"></view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20,
				navBarHeight:40,
				widowHeight: 375,
				val:"",
			};
		}, 
		props:{
			alpha:{
				type:Number,
				default:0
			},
			lable:{
					type:[String, Number],
					default:''
			},
			datas:{
				type:Object,
				default: {}
			}
		},
		watch:{
			lable(newVal){
				this.val = newVal
			}
		},
		created() {
			// 同步获取手机信息 , statusBarHeight 为导航栏的高度
			const info = uni.getSystemInfoSync();
			// 给状态栏赋值当前手机的状态栏高度
			this.statusBarHeight = info.statusBarHeight
			this.widowHeight = info.windowWid 
			// H5 app mp-alipay 不支持当前API需要写条件编译
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			//获取小程序中 的胶囊位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// 自动获取小程序的navbar的高度 = (胶囊底部高度 - 状态栏高度) + (胶囊顶部高度 - 状态栏高度)
			let navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight)
			this.navBarHeight = navBarHeight
			this.widowHeight = menuButtonInfo.left
			// console.log(navBarHeight);
			// #endif
		},
		methods:{
			goToBack(){
				// console.log("返回了");
				uni.navigateBack()
				// uni.switchTab()
			},
			goLabel(){
				uni.navigateTo({
					url: '/pages/views/Edit/Edit'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navbar_continar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		// background-color: rgba(15, 17, 56, 1.0);
		box-sizing: border-box;
		width: 100%;

		.navbar_content {
			box-sizing: border-box;
			display: flex;
			// flex-direction: column;
			// justify-content: center;
			width: 100%;
			align-items: center;
			padding: 0 15px;
			justify-content: space-between;
			height: 45px;
			.tabbar_icon{
				padding-right: 5px;
			}
			.navbar_content-title{
			display: flex;
			align-items: center;
				text{
					color: #aaa;
					// font-weight: bold;
				}
				.title-image{
					width: 30px;
					height: 30px;
					border-radius: 15px;
					overflow: hidden;
					margin-right: 10px;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}

		}
	}
</style>
